import { defineComponent, reactive, ref, onMounted } from 'vue'
import { ElCard, ElFormItem, ElInput, ElSelect, ElOption } from 'element-plus'
import { useStore } from 'vuex'
import type { FormValuesType } from './typings'
import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import ProSaasTable from '~/components/ProSaasTable'
import useVuexGetters from '~/hooks/useVuexGetters'

export default defineComponent(function ManholeAlarm() {
  const store = useStore()
  const proSaasTableRef = ref<ProSaasTableExposeType>()
  const formValues = reactive<FormValuesType>({})
  const manholeState = useVuexGetters('manhole', ['manholeModelOpt'])
  const manholesState = useVuexGetters('manholes', ['manholeTypeOpt'])
  const assetWorkAreaState = useVuexGetters('assetWorkArea', ['workAreaSelectList'])
  const columns: TableColumnProps<FormValuesType>[] = [
    {
      label: '设备名称',
      prop: 'deviceName',
      minWidth: 160,
      fixed: 'left',
      unFixed: true,
      showOverflowTooltip: true,
      sortable: true,
      disabled: true
    },
    {
      label: '设备编号',
      prop: 'code',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '设备类型',
      prop: 'typeName',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '设备型号',
      prop: 'modelName',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '温度',
      prop: 'temp',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '气体浓度',
      prop: 'gasConcent',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '倾斜角度',
      prop: 'angle',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true
    },
    {
      label: '是否溢水',
      prop: 'floodState',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true,
      render: (_, value) => <>{value === 1 ? '水浸' : '正常'}</>
    },
    {
      label: '是否开盖',
      prop: 'manholecoverState',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true,
      render: (_, value) => <>{value === 1 ? '打开' : '关闭'}</>
    },
    {
      label: '电量',
      prop: 'powerVoltage',
      minWidth: 160,
      showOverflowTooltip: true,
      sortable: true
    }
  ]
  //  按回车搜索列表
  const handleKeyDownEnterSubmitForm = (evt: Event | KeyboardEvent) => {
    if ((evt as KeyboardEvent).key === 'Enter') proSaasTableRef.value!?.toSearch()
  }
  //  清空搜索
  const clearSearchTable = async () => {
    setTimeout(() => {
      proSaasTableRef.value!?.toSearch()
    }, 100)
  }
  onMounted(async () => {
    //  井盖型号
    await store.dispatch('manhole/ManholeModelGet')
    //  井盖类型
    await store.dispatch('manholes/ManholeTypeGet')
    // 所属区域
    await store.dispatch('assetWorkArea/GetWorkAreaSelectListByUser')
  })
  return () => {
    return (
      <ElCard>
        <ProSaasTable
          tableId="ManholeWorkList"
          ref={proSaasTableRef}
          columns={columns}
          hasSelection
          dispatchType="manholes/ManholeWorkListGet"
          searchFormProps={{
            model: formValues
          }}
          searchformResponsiveCol={[
            <ElFormItem key="keyWord" prop="keyWord" label="">
              <ElInput
                v-model={formValues.keyWord}
                placeholder="设备名称或设备编号"
                clearable
                onKeydown={handleKeyDownEnterSubmitForm}
                onClear={clearSearchTable}
              />
            </ElFormItem>,
            <ElFormItem key="type" prop="type">
              <ElSelect
                v-model={formValues.type}
                placeholder="设备类型"
                clearable
                onChange={clearSearchTable}
              >
                {manholesState.manholeTypeOpt.value?.map((item: any) => (
                  <ElOption key={item?.dictKey} label={item?.dictValue} value={item?.dictKey!} />
                ))}
              </ElSelect>
            </ElFormItem>,
            <ElFormItem key="modelName" prop="modelName">
              <ElSelect
                v-model={formValues.modelName}
                placeholder="所属型号"
                clearable
                onChange={clearSearchTable}
              >
                {manholeState.manholeModelOpt?.value?.map((item: any) => (
                  <ElOption key={item?.id} label={item?.name} value={item?.name!} />
                ))}
              </ElSelect>
            </ElFormItem>,
            <ElFormItem key="workAreaId" prop="workAreaId">
              <ElSelect
                v-model={formValues.workAreaId}
                placeholder="所属区域"
                clearable
                onChange={clearSearchTable}
              >
                {assetWorkAreaState.workAreaSelectList?.value?.map((item: any) => (
                  <ElOption key={item?.id} label={item?.name} value={item?.id!} />
                ))}
              </ElSelect>
            </ElFormItem>
          ]}
        />
      </ElCard>
    )
  }
})
